<template>
  <section class="progress-wrapper">
    <ul class="progress-list">
      <li
        class="list-item"
        v-for="(item, index) in listData"
        :key="index"
        :style="{ height: (1 / listData.length) * 100 + '%', lineHeight: 1.7 }"
      >
        <span class="title-txt">{{ item.title }}</span>
        <a-progress
          class="progress-box"
          :stroke-color="{
            '0%': item.color[0],
            '100%': item.color[1],
          }"
          status="active"
          :showInfo="false"
          :percent="item.precent"
        />
        <span class="num-txt">{{ item.num }}%</span>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  props: ["listData"],
};
</script>

<style lang="scss">
.progress-wrapper {
  margin: 0 10px;
  height: 100%;
  .progress-list {
    height: calc(100% - 20px);
    margin-top:20px;
    .list-item {
      display: flex;
      .title-txt {
        width: 130px;
      }
      .progress-box {
        margin: 0 10px;
        .ant-progress-inner {
          background-color: #1d3965;
        }
      }
      .num-txt {
        color: #fff;
        width: 50px;
      }
    }
  }
}
</style>